import React, {useState, useEffect, useCallback, useRef} from 'react';
import {Container, TopDesc, Menu, SongItem, SongList} from "./style";
import AlbumHeader from "./AlbumHeader";
import Scroll from "../../baseUI/scroll";
import {getName, getCount} from './../../api/utils';
import style from '../../assets/styles/global-style';
import { useParams } from 'react-router-dom';
import { getAlbumDetailRequest } from '../../api/request';
export const HEADER_HEIGHT = 45;

function Album(props) {
    const { id } = useParams();
    const [title, setTitle] = useState('歌单');
    const [isMarquee, setIsMarquee] = useState(false);// 是否跑马灯
    const [currentAlbum, setCurrentAlbum] = useState([]);
    const headerEl = useRef();
    // 判断一个对象是否为空
    const isEmptyObject = obj => !obj || Object.keys (obj).length === 0;
    const handleClick = useCallback(() => {
        props.history.goBack();
    });
    useEffect(() => {
        getAlbumDetailRequest(id).then(res => {
            if(res.code === 200) {
                const playlist = res.playlist;
                setCurrentAlbum(playlist);
            }
        }).catch(e => {
            console.log('网络错误');
        })
    }, [id]);
    // 处理滚动
    const handleScroll = useCallback((pos) => {
        let minScrollY = -HEADER_HEIGHT;
        let percent = Math.abs(pos.y / minScrollY);
        let headerDom = headerEl.current;
        if (pos.y < minScrollY) {
            headerDom.style.backgroundColor = style["theme-color"];
            headerDom.style.opacity = Math.min(1, (percent - 1) / 2);
            setTitle(currentAlbum.name);
            setIsMarquee(true);
        } else {
            headerDom.style.backgroundColor = "";
            headerDom.style.opacity = 1;
            setTitle("歌单");
            setIsMarquee(false);
        }
    });
    const renderAlbumHeader = () => {
        return (
            <AlbumHeader
                ref={headerEl}
                title={title}
                isMarquee={isMarquee}
                handleClick={handleClick}
            />
        )
    };
    const renderScroll = () => {
        return(
            <Scroll bounceTop={false} onScroll={handleScroll}>
                <div>
                    {/*banner*/}
                    <TopDesc background={currentAlbum.coverImgUrl}>
                        <div className="background">
                            <div className="filter"></div>
                        </div>
                        <div className="img_wrapper">
                            <div className="decorate"></div>
                            <img src={currentAlbum.coverImgUrl} alt=""/>
                            <div className="play_count">
                                <i className="iconfont play">&#xe885;</i>
                                <span className="count">{Math.floor(currentAlbum.subscribedCount / 1000) / 10} 万 </span>
                            </div>
                        </div>
                        <div className="desc_wrapper">
                            <div className="title">{currentAlbum.name}</div>
                            <div className="person">
                                <div className="avatar">
                                    <img src={currentAlbum.creator.avatarUrl} alt=""/>
                                </div>
                                <div className="name">{currentAlbum.creator.nickname}</div>
                            </div>
                        </div>
                    </TopDesc>
                    <Menu>
                        <div>
                            <i className="iconfont">&#xe6ad;</i>
                            评论
                        </div>
                        <div>
                            <i className="iconfont">&#xe86f;</i>
                            点赞
                        </div>
                        <div>
                            <i className="iconfont">&#xe62d;</i>
                            收藏
                        </div>
                        <div>
                            <i className="iconfont">&#xe606;</i>
                            更多
                        </div>
                    </Menu>
                    <SongList>
                        <div className="first_line">
                            <div className="play_all">
                                <i className="iconfont">&#xe6e3;</i>
                                <span> 播放全部 <span className="sum">(共 {currentAlbum.tracks.length} 首)</span></span>
                            </div>
                            <div className="add_list">
                                <i className="iconfont">&#xe62d;</i>
                                <span> 收藏 ({getCount(currentAlbum.subscribedCount)})</span>
                            </div>
                        </div>
                        <SongItem>
                            {
                                currentAlbum.tracks.map((item, index) => {
                                    return (
                                        <li key={index}>
                                            <span className="index">{index + 1}</span>
                                            <div className="info">
                                                <span>{item.name}</span>
                                                <span>
                         {getName(item.ar)} - {item.al.name}
              </span>
                                            </div>
                                        </li>
                                    )
                                })
                            }
                        </SongItem>
                    </SongList>
                </div>
            </Scroll>
        )
    };
    return (
        <Container>
            {
                renderAlbumHeader()
            }
            {
                !isEmptyObject(currentAlbum) ? renderScroll() : null
            }
        </Container>
    )
}

export default React.memo(Album);